<template>
  <basic-dialog
    width="60%"
    :visible="visible"
    :showFooter="false"
    :handleClose="handleCancel"
  >
    <div>
      <skus-table
        :dataSource="TableInfo.list"
        :columns="TableInfo.columns"
        :loading="TableInfo.loading"
      >
        <div slot="content_context">
          <el-button type="primary" size="mini" @click="handleSetReferCities">设置参照城市</el-button>
        </div>
      </skus-table>
      <div class="footer-wrap" slot="ft">
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确定</el-button>
      </div>
    </div>
    <SetReferCitiesDialog :visible.sync="setDialogVisible" v-bind="$attrs" @getReferList="updateTableList" />
  </basic-dialog>
</template>
<script>
import { mapMutations } from 'vuex';
import BasicDialog from '@/components/BasicDialog';
import SkusTable from '@/components/skusTable';
import SetReferCitiesDialog from './SetReferCitiesDialog';
import { TableInfo } from '@/utils/getUtils';
import { TABLE_COLUMNS } from './constants/showReferCities';
export default {
  components: {
    BasicDialog,
    SkusTable,
    SetReferCitiesDialog
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    dataSource: {
      type: Array,
      default: () => []
    },
    purchaseType: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      TableInfo: new TableInfo({ columns: TABLE_COLUMNS }),
      setDialogVisible: false, // 设置参照城市弹框开关
    }
  },
  watch: {
    purchaseType: {
      handler (newVal) {
        this.UPDATE_PURCHASE_TYPE(newVal)
      },
      immediate: true
    },
    dataSource: {
      handler (newList) {
        this.TableInfo.setList(newList)
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    ...mapMutations('commonComps/referCitiesUpdate', [
      'UPDATE_PURCHASE_TYPE', // 更新采购类型
    ]),
    // 设置参照城市
    handleSetReferCities () {
      this.setDialogVisible = true
    },
    // 更细表格数据
    updateTableList (list) {
      this.TableInfo.setList(list)
    },
    // 取消
    handleCancel () {
      this.$emit('update:visible', false)
    },
    // 确定
    handleConfirm () {
      this.$emit('update:dataSource', this.TableInfo.list)
      this.$emit('getReferCities', this.getFinalReferCitiesList())
      this.handleCancel()
    },
    // 获取最终参照城市列表
    getFinalReferCitiesList () {
      const finalList = this.TableInfo.list.filter(item => item.saleCityUuid == item.templateCityUuid)
      return finalList
    }
  }
}
</script>
<style lang="less" scoped>
/deep/ .el-dialog__header {
  border-bottom: none
}
.footer-wrap {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}
</style>
